<template>
  <tl-tabs :tabList="tabList" class="tabBox"></tl-tabs>
</template>

<script>
import Study1 from '@/components/game/study/study1.vue'
import Study2 from '@/components/game/study/study2.vue'
import Study3 from '@/components/game/study/study3.vue'
import Study4 from '@/components/game/study/study4.vue'
import Study5 from '@/components/game/study/study5.vue'
import Study6 from '@/components/game/study/study6.vue'
import Study7 from '@/components/game/study/study7.vue'
import Study8 from '@/components/game/study/study8.vue'
import Study9 from '@/components/game/study/study9.vue'
import Study10 from '@/components/game/study/study10.vue'
import Study11 from '@/components/game/study/study11.vue'
import Study12 from '@/components/game/study/study12.vue'

export default {
  components: { Study1, Study2, Study3, Study4, Study5, Study6, Study7, Study8, Study9, Study10, Study11, Study12 },
  data() {
    return {
      tabList: [
        { label: '加减法', component: Study1 },
        { label: '混合加减法', component: Study2 },
        { label: '加减法-算一算-1', component: Study3 },
        { label: '加减法-算一算-2', component: Study4 },
        { label: '加减法-比一比-1', component: Study5 },
        { label: '加减法-比一比-2', component: Study6 },
        { label: '加减法-综合', component: Study7 },
        { label: '加减法-连线', component: Study8 },
        { label: '乘除法-算一算-1', component: Study9 },
        { label: '乘除法-算一算-2', component: Study10 },
        { label: '除法-算一算', component: Study11 },
        { label: '乘除法-综合', component: Study12 }
      ],
    }
  },
}
</script>

<style scoped>
.tabBox {
  width: calc(100% - 20px);
  height: calc(100% - 10px);
  border: 1px solid blue;
  font-size: 20px;
  overflow: auto;
}
</style>